<template>
  <div class="app-container">
    <ManageTitle name="林支持" role="管理员" />
    <el-form class="mt20" :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <el-row :gutter="20">
        <el-col :span="3.5">
          <el-form-item>
            <el-select v-model="queryParams.groupId" style="width: 100%;">
              <el-option
                v-for="item in groupOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3.5">
          <el-form-item>
            <el-input
              v-model="queryParams.searchStr"
              placeholder="请输入锁名称"
              clearable
              style="width: 240px"
              @keyup.enter="handleQuery"
            >
              <template #append>
                <el-button :icon="Search" @click="handleQuery" />
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <div style="margin-left: auto;">
          <el-button plain type="primary" @click="handleAdd">授予钥匙</el-button>
          <el-button plain type="primary" @click="handleRemoveDl">删除钥匙</el-button>
        </div>
      </el-row>
    </el-form>
    <el-table :data="list" class="mt20" stripe style="width: 100%">
      <el-table-column prop="lockAlias" label="锁名称" width="180" />
      <el-table-column prop="branchName" label="分组" width="180" />
      <el-table-column prop="senderUsername" label="发送人" width="180" />
      <el-table-column prop="sendDate" label="发送时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-space>
            <el-button link type="primary" @click="handleRemove(scope.row, scope.$index)">删除</el-button>
          </el-space>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <KeyOperationDl
      :visible="keyOperation.visible"
      :type="keyOperation.type"
      :title="keyOperation.title"
      @cancel="handleKeyOperationCancel"
      @ok="handleKeyOperationOk"
    >
      <template #default>
        <el-checkbox v-model="allowUnlocking" v-if="keyOperation.type === 'add'">允许员工远程开锁</el-checkbox>
      </template>
    </KeyOperationDl>
  </div>
</template>
<script setup name="KeyManage">
import groupApi from '@/api/setting/group'
import ManageTitle from '../component/manageTitle.vue'
import { Search } from '@element-plus/icons-vue'
import KeyOperationDl from '../component/keyOperationDl.vue'

const groupOptions = ref([])
const list = ref([])
const loading = ref(false)
const total = ref(0)
const allowUnlocking = ref(true)
const data = reactive({
  queryParams: {
    groupId: null,
    searchStr: null,
    pageNum: 1,
    pageSize: 10
  },
  keyOperation: {
    visible: false,
    type: 'add',
    title: ''
  }
})
const { queryParams, keyOperation } = toRefs(data)




/* 搜索 */
function handleQuery() {
  getList()
}

/* 授予钥匙弹窗操作 */
function handleAdd() {
  keyOperation.value.type = 'add'
  keyOperation.value.title = '授予钥匙'
  keyOperation.value.visible = true
}
/* 删除钥匙弹窗操作 */
function handleRemoveDl() {
  keyOperation.value.type = 'remove'
  keyOperation.value.title = '删除钥匙'
  keyOperation.value.visible = true
}
/* 授予/删除钥匙弹窗操作 */
function handleKeyOperationCancel() {
  keyOperation.value.visible = false
}
function handleKeyOperationOk(type, value) {
  console.log(value)
  if (type === 'add') {
    let params = {
      values: [...value],
      allowUnlocking: allowUnlocking.value
    }
    console.log('add', params)
  } else if (type === 'remove') {
    console.log('remove', value)
  }
  keyOperation.value.visible = false
}

function getList() {
  console.log('获取列表数据');
}

// 获取分组列表
function getGroupList() {
  groupApi.getList().then(res => {
    groupOptions.value = res.rows.map(item => ({
      label: item.groupName,
      value: item.groupId
    }))
    groupOptions.value.unshift({
      label: '全部片区',
      value: ''
    })
    // queryParams.value.groupId = groupOptions.value[0].value
  })
}
getGroupList()
</script>
